<template>
	<view class="upload-manager">
		<view class="header">
			<text class="title">文件上传中心</text>
			<button @click="startUpload" size="mini">开始模拟上传</button>
		</view>

		<view v-for="file in fileList" :key="file.id" class="file-item">
			<text class="file-name">{{ file.name }}</text>
			<view class="progress-wrapper">
				<progress
					class="progress-bar"
					:percent="file.progress"
					:show-info="false"
					:border-radius="8"
					:stroke-width="8"
					:activeColor="file.progress >= 100 ? '#18BC37' : '#007AFF'"
					:backgroundColor="'#EFEFEF'"
					:active="true"
					active-mode="forwards"
					:duration="15"
					@activeend="onUploadAnimationEnd(file)"
				/>
				<!-- 添加我们自己的、格式化后的文本显示 -->
				<text class="progress-text">{{ file.progress.toFixed(2) }}%</text>
			</view>
			<text class="status-text">{{ file.status }}</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			fileList: [
				{ id: 1, name: '年度报告.docx', progress: 0, status: '等待上传' },
				{ id: 2, name: '团队合影.png', progress: 0, status: '等待上传' },
				{ id: 3, name: '项目计划.pdf', progress: 0, status: '等待上传' }
			],
			uploadInterval: null
		};
	},
	methods: {
		startUpload() {
			if (this.uploadInterval) return; // 防止重复点击

			this.uploadInterval = setInterval(() => {
				let allDone = true;
				this.fileList.forEach((file) => {
					if (file.progress < 100) {
						allDone = false;
						// 模拟随机进度增长
						file.progress += Math.random() * 10;
						if (file.progress > 100) {
							file.progress = 100;
						}
					}
				});
				if (allDone) {
					clearInterval(this.uploadInterval);
					this.uploadInterval = null;
				}
			}, 500);
		},
		onUploadAnimationEnd(file) {
			// 当动画播放到100%时触发
			if (file.progress >= 100) {
				console.log(`${file.name} 上传动画完成!`);
				this.$set(file, 'status', '上传成功！');
			}
		}
	}
};
</script>

<style>
.upload-manager {
	padding: 15px;
}
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}
.title {
	font-size: 18px;
	font-weight: bold;
}
.file-item {
	margin-bottom: 15px;
}
.file-name {
	font-size: 14px;
	margin-bottom: 5px;
}
.status-text {
	font-size: 12px;
	color: #888;
	text-align: right;
}
/* 【新增样式】 */
.progress-wrapper {
	display: flex;
	align-items: center; /* 垂直居中对齐 */
	width: 100%;
}
.progress-bar {
	flex-grow: 1; /* 让进度条占据所有剩余空间 */
}
.progress-text {
	width: 60px; /* 给文本一个固定宽度，防止数字跳动时影响布局 */
	text-align: right; /* 文本右对齐 */
	font-size: 12px;
	color: #333;
	margin-left: 10px; /* 与进度条保持一点间距 */
	font-family: 'Courier New', Courier, monospace; /* 使用等宽字体，数字跳动更好看 */
}
</style>
